Consistency in Design

Building and maintaining a consistent experience in your designs, products, and systems can have great consequences for your customers and their experience.

Customers become accustomed to specific interface objects and even the location of those objects on a screen. This makes the experience familiar, and your product becomes more straightforward to use. 

This includes establishing the colors, typefaces, and tone of a product that can be used across many types of layouts and interfaces.

The experience of your product should be cohesive, with a continuation from one element to the next like the way a book is structured. Every visual element cues the audience that you’re still in the same story, moving from chapter to chapter. Keeping colors, fonts, and alignment consistent helps your audience focus on the plot. 

This goes back to our discussion of design patterns in the Simplicity lesson. Maintaining the locations of objects, like the menu button in one of the top two corners, is a design pattern establish in many products and one you can build in your product too. If your customer can already tell how your product works because it works like other products they are familiar with, then they don't have to spend time learning your interface. 

People become accustomed to existing patterns, and our brains are optimized for recalling and repeating patterns. We build a shared understanding of how specific products work and then have an expectation for how similar products are supposed to work. This intuitiveness is based on design patterns across the design industry and is one reason to keep looking at other products and designs to see how they are solving problems.

These patterns are also seen in common design systems and are a benefit of Google's Material Design and Apple's Human Interface Guidelines. Establishing elements that many app designers use creates consistency across thousands of applications.

As you establish a mood and tone to your designs, you’ll want them to feel consistent as well. A continuation from one screen or product to the next, as if one voice is talking to your customer. If I click on a link on your website and the next page feels radically different, I may think that hyperlink took me to another website and not another page of the same site. If your homepage is airy with a lot of white space, your product page shouldn’t be dense and content heavy with little breathing room. As your audience discovers new elements, they should instantly know that they are still using your product.

This expands to the tone of your interface copy as well. Your writing should remain consistent with your product. If your product is geared toward an enterprise audience and your homepage or landing screen describes the product in a formal, professional way, then the other pages or screens in your product should not be casual in tone and full of puns. A great example of a guide for this is Shopify's Voice and Tone section of it's Polaris design system.

The consistency of an experience is also essential when it comes to the sharing of your product. A customer may have a great experience using your app to order groceries or buy a product. So much so that they evangelize your product, telling their friends how great it is or how beautiful it works to solve their problems. If those friends then come to your product and don't have that experience, that is an inconsistency too.

A rule of thumb is to use two or three styles of type across an entire product, like a website or app. Using more than that can make a product feel unstructured or busy, and can be distracting. For colors, a great starting place is one primary color, one secondary color, and a few tones of those colors, plus black and white. Using more colors in complex systems can work successfully, but it becomes more difficult with each addition.

As stated above, consistency has a lot of benefits, so using additional typefaces or colors can be used for differentiation but should feel like it fits within the experience. 

One of the easiest ways to make a document or interface look and feel well designed is consistency in where objects sit in space. 

Say your app screen has a title and it is 100px from the top of the frame or screen. You want all the other app screens with similar titles to have those titles in the same place. 

Guides and measurements are your friends here — just click and drag from a ruler in Figma to create a guide, and hold the Alt key when an object is selected to see the distance to the objects around it.

Consider the left side, or left vertical margin, of a website, poster, app screen, infographic, etc., containing a logo, an image, a header, and some body text. Aligning these elements to each other will make it easier for the eye to move down the page, but also makes the layout of this content seem considered and intentional.

You can also use a break of consistency to your advantage. We avoid distraction so that our interface can get out of the way of our customers using our product. A lack of consistency can be used to create emphasis an attract attention. Our brains detect patterns and signal your attention when what is happening in front of your eyes deviates from the expected pattern.

An example is indenting a quote block to further emphasize it. One thing to keep in mind when considering types of emphasis is to limit the amount of them. A bold, red, italics, larger block of text is not really necessary if you are also indenting it. And remember: if everything is bold, nothing is bold — the amount of what you emphasize is essential too.

As we’ll consider in the upcoming Hierarchy lesson, this creation of emphasis is a tool that is used to draw the attention of your customers and aid in your customer flow by guiding where their eyes move and which details they may remember.

Consistency is often broken, and it will happen frequently. That's okay! It's more important to understand your customers' needs and solve their problems than maintain a consistent product. If you are only paying attention to a rigid system, you might not address those problems. It's a balance.

Go to next section